				<!DOCTYPE html>
				<html lang="en">
				<head>
				<meta charset="UTF-8">
				<title>九宫格 有圆角</title>
				<style>
				div.body{
				width:100px;
				height:100px;
				background-color:blue;
				border:1px;/*边框 */
				margin:5px;/*外边距*/
				border-radius:15px;
				padding:5px;/*内变距*/
				}	
				
				
				}
				ul{list-style: outside none none;}
				li{list-style: outside none none;}
				li{
				float:left;
				list-style: outside none none;}
				</style>		</head>
				<body>
				<div class="body">这是一个有圆角方格</div>
				<hr/><p>下面是九宫格</p>
				<ul>
				<li>
				<ul>
				<li>
				
				
				<div class="body"></div>
				</li>
				<li>
				<div class="body"></div>
				</li><li>
				<div class="body"></div></li>
				</ul></li>
				<li>
				<ul>	<li><div class="body"></div>
				
				
				</li>
				<li>
				<div class="body"></div>
				</li>
				<li>
				
				<div class="body"></div>
				</li>
				</ul>
				</li>
				<li >
				<ul>
				<li>
				<div class="body"></div>
				</li>
				<li>
				<div class="body"></div>
				</li>
				<li>
				<div class="body"></div>
				</li>
				</ul>
				</li>
				</ul>
				</body>
				</html>